<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Chat</title>
</head>
<body>
<input type="text" id="messageInput" placeholder="Type your message...">
<button onclick="sendMessage()">Send</button>
<ul id="chatMessages"></ul>

<script>
    const socket = new WebSocket('ws://localhost:3000');

    socket.onmessage = (event) => {
        const messages = document.getElementById('chatMessages');
        const li = document.createElement('li');
        console.log('Received data:', event.data);
        console.log('Data type:', typeof event.data);
        li.textContent = event.data;
        messages.appendChild(li);
    };

    function sendMessage() {
        const input = document.getElementById('messageInput');
        const message = input.value;
        socket.send(message);
        input.value = '';
    }
</script>
</body>
</html>
